<template>
  <div>
    <el-row type="flex" justify="space-between" align="center">
      <el-breadcrumb separator="/" style="line-height:32px">
        <el-breadcrumb-item :to="{ path: queryParams.currentPath }">
            结业资格审核
        </el-breadcrumb-item>
        <el-breadcrumb-item>查看机审详情</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button type="text" @click="back()">返回</el-button>
    </el-row>
    <el-card>
      <h2 slot="header">查看详情</h2>
      <!-- 学生基本信息 -->
      <student-base-info ref="studentInfo" />
      <!-- 学分标准 -->
      <div v-show="showStandard">
        <h3 class="title">学分标准</h3>
        <professional-audit-standards ref="professional" :showGotCredit="true"/>
        <public-elective-standard  ref="elective" :showGotCredit="true"/>
      </div>
      <!-- 课程完成情况 -->
      <course-completion-info ref="courseCompletionInfo" />
      <!-- 右下方操作按钮 -->
      <el-row type="flex" justify="end" style="margin-top:16px">
        <el-button @click="prev" :disabled="preBtnActive">上一位</el-button>
        <el-button @click="next" :disabled="nexBtnActive">下一位</el-button>
        <el-button @click="back">取消</el-button>
      </el-row>
    </el-card>
  </div>
</template>
<script>
  import request from 'common/src/api/preparatoryGraduation/completionAudit';
  export default {
    name: 'auditDetail',
    components: {
      studentBaseInfo: () => import('./studentBaseInfo'),
      professionalAuditStandards: () => import('../../auditStandards/components/professionalAuditStandards'),
      publicElectiveStandard: () => import('../../auditStandards/components/publicElectiveStandard'),
      courseCompletionInfo: () => import('./courseCompletionInfo')
    },
    data() {
      return {
        queryParams: {
          studentId: '',
          currentPath: '',
          index: 0,
          tableData: [],
          condition: {}
        },
        preBtnActive: false,
        nexBtnActive: true,
        showStandard: false
      };
    },
    created() {
      this.queryParams = {
        ...this.$route.query
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.initButtonStatus();
        request.getAuditDetail(this.queryParams.studentId).then(res => {
          const data = res && res.data;
          if (!Object.keys(data).length) {
            this.$message({
              type: 'warning',
              message: '当前学生未关联培养方案'
            });
            return;
          }
          // 初始化学生基本信息
          this.$refs['studentInfo'].init(data.studentBaseInfo || {});
          // 初始化学分标准信息
          this.showStandard = true;
          this.$refs['professional'].init(data.professionalAuditStandards || []);
          this.$refs['elective'].init(data.publicElectiveStandard || []);
          // 初始化学生课程完成情况
          this.$refs['courseCompletionInfo'].init(data.planList || {});
        });
      },
      initButtonStatus() {
        this.preBtnActive = this.queryParams.index === 0;
        this.nexBtnActive = this.queryParams.index === this.queryParams.tableData.length - 1;
      },
      back() {
        this.$store.commit('delete_tabs', this.$route.path)
        this.$router.push({
          path: this.queryParams.currentPath,
          query: {
            condition: this.queryParams.condition
          }
        })
      },
      prev() {
        this.queryParams.index--;
        const prevStudentId =  this.queryParams.tableData[this.queryParams.index].studentId;
        this.queryParams.studentId = prevStudentId;
        this.init();
      },
      next() {
        this.queryParams.index++;
        const nextStudentId =  this.queryParams.tableData[this.queryParams.index].studentId;
        this.queryParams.studentId = nextStudentId;
        this.init();
      }
    }
  };
</script>
